.index {
	display: flex;
	flex-direction: column;

	main {
		height: 1px;
		flex-grow: 1;
		overflow-y: auto;
	}

	section {
		margin: 15px 20px;
	}
	//排名+打卡
	.main1 {
		display: flex;
		height: 130px;

		.rank {
            background:#54afda url(../../assets/imgs/index-card-rank.png) no-repeat left ;
            background-size: 100px;
			width: 1px;
			flex-grow: 1;
			// background: #1592cc; //背景图片和背景颜色不能分开使用,否则会被覆盖
			margin-right: 15px;
			border-radius: 15px;
			color: #004e73;
			text-indent: 1em;
			padding-top: 10px;
			box-sizing: border-box;

			#rankNum{
				display: block;
				color: #fff;
				text-align: right;
				margin-right: 12px;
				font-size: 80px;
			}
		}

		.clockin {
			position: relative;
			width: 1px;
			flex-grow: 2;
			color: #004e73;
			background:#9fd9f8 url(../../assets/imgs/index-card-sum.png) no-repeat 15px center;
			background-size: 100px 100px;
			border-radius: 15px;
			text-indent: 1em;
			padding-top: 10px;
			box-sizing: border-box;

			#clokinbtn{
				height: 30px;
				border-radius: 15px;
				color: #004e73;
				background-color: rgba(255, 255, 115, 0.5);
				position: absolute;
				bottom: 30px;
				right: 15px;
				font-size: 15px;
			}
		}
	}
    .main2{
        display: flex;
        height: 130px;
        .data{
            flex-grow: 1;
            background: url(../../assets/imgs/index-card-data.png) no-repeat center center/cover;
            color: #fff;
            padding-top: 20px;
            box-sizing: border-box;
            margin-right: 10px;
            text-indent: 1em;
            border-radius: 20px;
        }
        .result{
            flex-grow: 1;
            background:#9dbde3 url(../../assets/imgs/index-card-badge.png) no-repeat 6px 25px;
            color: #004e73;
            background-size: 100px 100px;
            padding-top: 20px;
            text-indent:1em;
            box-sizing: border-box;
            border-radius: 25px;

            p{
                text-align: right;
                span{
                    font-size: 70px;
                }
            }
        }
    }
    .main3{
        height: 130px;
       background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat ; 
       background-size: cover;
       text-indent: 1em;
       padding-top: 10px;

       a{
        color: #fff;
       }
    }

    .main4{
        height: 130px;
        background: url('../../assets/imgs/index-card-run.png');
        background-size: cover;
        text-indent: 1em;
       padding-top: 10px;

       a{
        color: #fff;
       }
    }
	//轮播图
	.swiper {
		width: 100%;
		height: 200px;

		.silder1 {
			background: url(../../assets/imgs/index-swiper-bg1.jpg) no-repeat center center;
			background-size: cover;
		}

		.silder2 {
			background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat center center;
			background-size: cover;
		}

		.silder3 {
			background: url(../../assets/imgs/index-swiper-bg3.jpg) no-repeat center center;
			background-size: cover;
		}
	}
	.tabbar {
		height: 60px;
		background: #fff;
		box-shadow: 0px -3px 5px 0 #f00;
		display: flex;
		justify-content: space-around;
		align-items: center;

		i {
			display: block;
			text-align: center;
			font-size: 30px;
		}

		a {
			color: #777;
			&:active {
				color: #4294ff;
			}
		}
	}
}
